<template>
   <div>

      <!-- 表格主体 -->
      <el-table :data="store.getters['user/getUserlist']" border style="width: 100%">
         <!-- 用户编号 -->
         <el-table-column prop="uid" label="用户编号" />
         <!-- 用户名称 -->
         <el-table-column prop="username" label="用户名称" width="200" />
         <!-- 所属角色 -->
         <el-table-column prop="rolename" label="所属角色" width="200" />

         <!-- 状态 -->
         <el-table-column prop="status" label="状态">
            <template v-slot="{ row }">
               <el-tag type="success" round size="large" v-if="row.status == 1">正常</el-tag>
               <el-tag type="warning" round size="large" v-else>禁用</el-tag>
            </template>
         </el-table-column>

         <!-- 操作 -->
         <el-table-column label="操作">
            <template v-slot="{ row }">
               <el-button type="primary" @click="edit(row.uid)" round>编辑</el-button>
               <el-button type="danger" v-if="row.id != 1" @click="del(row.id)" round>删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination class="pagination" background layout="prev, pager, next" @current-change="changcurrent"
         :page-size="store.getters['user/getPageSize']" :total="store.getters['user/getTotal']" />
   </div>
</template>


<script lang='ts' setup>
//引入子传父事件 ->defineEmits
import { defineEmits } from "vue";
//引入Vuex仓库
import { useStore } from "vuex";
//引入删除提示
import { ElMessage, ElMessageBox } from 'element-plus';
//调用删除接口
import { delUser } from "../../request/api";


//================数据=================
//子传父事件
const emits = defineEmits(['edit']);
//使用仓库
const store = useStore();


//================事件=================
//获取管理员管理的列表数据
if (store.getters['user/getUserlist'].length == 0) {
   store.dispatch('user/changeUserAction');
}
//获取总数
store.dispatch('user/changeTotalAction');

//改变当前页事件
const changcurrent = (page: number) => {
   store.dispatch('user/changePageAction', page);
};

//点击编辑
const edit = (uid: any) => {
   emits('edit', uid);
};

//点击删除事件
const del = (id: number) => {
   ElMessageBox.confirm(
      '您确定要删除吗?',
      '删除提示框',
      {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning',
      }
   )
      .then(async () => {
         //删除接口
         let res: any = await delUser({ id });
         if (res.code == 200) {
            //成功提示
            ElMessage.success(res.msg);
            //重新刷新页面
            store.dispatch('user/changeUserAction');
            //重新获取总数
            store.dispatch('user/changeTotalAction');
         } else {
            //失败提示
            ElMessage.error(res.msg);
         }
      })
      .catch(() => {
         ElMessage({
            type: 'info',
            message: '已取消删除',
         })
      })
}




</script>


<style lang='less' scoped>
.pagination {
   margin: 20px 0;
}
</style>